<script lang="ts">
  import "../app.pcss";

  import { BottomNav, BottomNavItem, Navbar, NavBrand, NavLi, NavUl, NavHamburger, ButtonGroup, Button, Input, Modal, Label, Checkbox } from 'flowbite-svelte';
  import { HomeSolid, InfoCircleSolid, ChartPieSolid, AdjustmentsVerticalOutline, UserCircleSolid, SearchOutline, BarsOutline, CaretDownSolid, CaretUpSolid } from 'flowbite-svelte-icons';

  import { onMount, onDestroy } from 'svelte';
  import { fade, fly, draw } from 'svelte/transition';

  import { url, sidebar } from '$lib/data';
    import { find_file } from "$lib/momodecom";
    import { closeWindow } from "$lib/utils";

  let svgClass = 'mb-1 text-pink-500/50 dark:text-pink-400/50 group-hover:text-pink-600/50 dark:group-hover:text-pink-500/50';
  let svgActiveClass = 'mb-1 text-sky-500 dark:text-sky-500 group-hover:text-sky-700 dark:group-hover:text-sky-700';
  
  //导航栏
  let this_nav_state: Boolean = $state(false);
  let this_nav_ob: IntersectionObserver;
  let this_nav: HTMLElement | null = $state(null);

  let Nav_state:boolean = $state(true);

  let formModal:boolean = $state(false);
  let formModal2:boolean = $state(false);

  onMount(() => {
      var this_nav_ob = new IntersectionObserver(
      entries => {
        //window.scrollY > 1是因为初始化dom时这个if会执行
        if(entries[0].intersectionRatio <= 10 && window.scrollY > 1){
          this_nav_state = !this_nav_state;
        }
      });
      if (this_nav != null){
        this_nav_ob.observe(this_nav);
      }

      find_file();
  });
  onDestroy(() => {
    if (this_nav_ob && this_nav) {
      this_nav_ob.unobserve(this_nav);
    }
  });

  let startX: number | undefined;
  let startY: number | undefined;
  let endX: number | undefined;
  let endY: number | undefined;

  // 计算滑动方向
  function getSwipeDirection(startX: number, startY: number, endX: number, endY: number): string {
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      return deltaX > 0 ? 'right' : 'left';
    } else {
      return deltaY > 0 ? 'down' : 'up';
    }
  }

  

</script>

{#if !$sidebar}
<div class="absolute mt-[0.7rem] start-[21rem] z-20" in:fly={{ x: -600, duration: 700 }} out:fade={{ duration: 200 }}>
  <Button color="alternative" pill onclick={() => sidebar.update(value => value = !value)}><BarsOutline /></Button>
</div>
{/if}
<div class="relative px-8" bind:this={this_nav}>
  <Navbar class="px-2 sm:px-4 py-2.5 w-full z-20 top-0 start-0 border-b">
    <NavBrand href="/">
      <img src="/icon.svg" alt="A image">
      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">上肢偏瘫康复外骨骼Webui</span>
    </NavBrand>
    <div class="flex md:order-2">
      <Button color="none" data-collapse-toggle="mobile-menu-3" aria-controls="mobile-menu-3" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-1">
        <SearchOutline class="w-5 h-5" />
      </Button>
      <Button class="mx-3" on:click={() => (formModal = true)}>登入</Button>
      <!-- <div class="hidden relative md:block">
        <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
          <SearchOutline class="w-4 h-4" />
        </div>
        <Input id="search-navbar" class="ps-10" placeholder="Search..." />
      </div> -->
      <Button color='red' class="mx-8" on:click={() => {closeWindow();}} >关闭软件</Button>
      <NavHamburger />
    </div>
      <ButtonGroup>
        <Button pill href="/" >
          <HomeSolid />
        </Button>
        <Button pill href="/about" >
          <InfoCircleSolid />
        </Button>
      </ButtonGroup>
  </Navbar>
</div>
{#if this_nav_state}
<div class="relative px-8">
  <Navbar class="px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 start-0 border-b">
    {#if !$sidebar}
    <!-- 有布局bug -->
    <!-- <div transition:fade> -->
      <Button class="absolute m-4 start-[20rem]" color="alternative" pill onclick={() => sidebar.update(value => value = !value)}><BarsOutline /></Button>
    <!-- </div> -->
    {/if}
    <NavBrand href="/">
      <img src="/icon.svg" alt="A image">
      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">上肢偏瘫康复外骨骼Webui</span>
    </NavBrand>
    <div class="flex md:order-2">
      <Button color="none" data-collapse-toggle="mobile-menu-3" aria-controls="mobile-menu-3" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-1">
        <SearchOutline class="w-5 h-5" />
      </Button>
      <Button class="mx-3" on:click={() => (formModal = true)}>登入</Button>
      <div class="hidden relative md:block">
        <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
          <SearchOutline class="w-4 h-4" />
        </div>
        <Input id="search-navbar" class="ps-10" placeholder="Search..." />
      </div>
      <NavHamburger />
    </div>
    <!-- <NavUl>
      <NavLi href="/" class={$url === '/' ? svgActiveClass : svgClass}>Home</NavLi>
      <NavLi href="/about" class={$url === '/about' ? svgActiveClass : svgClass}>About</NavLi>
    </NavUl> -->
  </Navbar>
</div>
{/if}

<slot></slot>

{#if Nav_state}
  <div in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
    <BottomNav position="fixed" classInner="grid-cols-5" navType="application">
      <BottomNavItem btnName="Home" href="/">
          <HomeSolid  class={$url === '/' ? svgActiveClass : svgClass} />
      </BottomNavItem>
      <BottomNavItem btnName="chart" href="/chart">
          <ChartPieSolid class={$url === '/chart' ? svgActiveClass : svgClass} />
      </BottomNavItem>
      <div onclick={() => {Nav_state = !Nav_state}} class="flex items-center justify-center transition duration-300 ease-in-out hover:scale-150 ">
        <CaretDownSolid />
      </div>
      <BottomNavItem btnName="settings" href="/settings">
          <AdjustmentsVerticalOutline class={$url === '/settings' ? svgActiveClass : svgClass} />
      </BottomNavItem>
      <BottomNavItem btnName="User" href="/user">
          <UserCircleSolid class={$url === '/user' ? svgActiveClass : svgClass} />
      </BottomNavItem>
    </BottomNav>
  </div>
{:else}
  <div onclick={() => {Nav_state = !Nav_state}} class="fixed w-full">
    <div in:fade={{ duration: 200 }} out:fly={{ y: -200, duration: 300 }} class="fixed bottom-0 left-[49.5%] border-2 rounded-lg hover:shadow-lg items-center justify-center w-[1.5rem] transition duration-300 ease-in-out hover:scale-150 ">
      <CaretUpSolid />
    </div>
  </div>
{/if}

<Modal bind:open={formModal} size="xs" autoclose={false} class="w-full">
  <form class="flex flex-col space-y-6" action="#">
    <h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">登入界面</h3>
    <Label class="space-y-2">
      <span>邮箱</span>
      <Input type="email" name="email" placeholder="name@company.com（未注册的邮箱将会被注册）" required />
    </Label>
    <Label class="space-y-2">
      <span>密码</span>
      <Input type="password" name="password" placeholder="•••••" required />
    </Label>
    <div class="flex items-start">
      <Checkbox>记住密码</Checkbox> 
      <div class="ms-auto text-sm text-primary-700 hover:underline dark:text-primary-500"> <Button on:click={() => (formModal2 = true,formModal = false)}>丢失密码</Button></div>
    </div>
    <Button type="submit" class="w-full1">登入</Button>
  </form>
</Modal>

<Modal bind:open={formModal2} size="xs" autoclose={false} class="w-full">
  <form class="flex flex-col space-y-6" action="#">
    <h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">找回界面</h3>
    <Label class="space-y-2">
      <span>邮箱</span>
      <Input type="email" name="email" placeholder="name@company.com" required />
    </Label>
    <Button type="submit" class="w-full1">找回</Button>
  </form>
</Modal>

